
{% extends "layout.html" %}
{% block content %}
<div class="panel panel-default"  id="ballId" style="position: absolute; cursor: move; left: 880px; top: 446px;">
  <script src="../../static/build/suspension-ball.js"></script>
  <script>
    suspensionBall('ballId', '')
  </script>
  <div class="panel-heading" >


    <h3 class="panel-title" >已生成的公私钥</h3>

  </div>
  <div onscroll="">

<!--js填充处-->
   <div id="keybody" >

   </div>

   <button type="button"  class="button" id="clear" onclick="btn_clear()">清除已存数据</button>

  </div>
</div>

<div id="context">

<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
    <div class="container">
    
      <h4 class="display-4">欢迎访问<br>上外贸定制版 FISCO BCOS 工具箱！</h4>
    
      <p>使用图形化的方式调用 FISCO BCOS Python-SDK，除此之外还有多个FISCO BCOS 开发相关功能</p>
      <p><a href="https://github.com/SUIBE-Blockchain/fisco_bcos_toolbox" class="btn btn-primary btn-large">查看 Github 源码……</a></p>
    </div>
</div><!-- /.jumbotron -->

<div class="container">
  <div class="row">
    <div class="col-lg-8">
      <a class="no_type_a" target="_blank" data-tooltip="点击查看 API 文档" href="https://github.com/SUIBE-Blockchain/FISCO_BCOS_Toolbox/wiki/%E6%8E%A5%E5%8F%A3-v1.0#1-generate-address"><h3><i class="fa fa-angellist"></i>生成测试用私钥与地址</h3></a>
      <br>
      <p>
        <a class="btn btn-outline-secondary" v-on:click="get_addr()">Generate!</a>
        <a class="btn btn-outline-secondary" v-on:click="get_addr_by_priv(priv)">Generate by Privkey!</a>
      </p>



      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text" id="basic-addon1">Privkey:</span>
        </div>
        <input v-model="priv" type="text" class="form-control" placeholder="Privkey" aria-label="Privkey" aria-describedby="basic-addon1">
      </div>

      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text" id="basic-addon1">Address:</span>
        </div>
        <input v-model="addr" readonly="readonly" type="text" class="form-control" placeholder="Address" aria-label="Address" aria-describedby="basic-addon1">
      </div>
    </div>
    
  </div><!-- /.row -->
  <br>
  <div class = "row">
    <div class="col-lg-8">
      <a class="no_type_a"><h3><i class="fa fa-flask"></i> 生成 Mock Data</h3></a>
      <br>
      <div class="form-group">
        <label class="control-label">选择你要模拟的数据类型：</label>
        <br>
          <div class="selectContainer">
            <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
              <select  v-model="mock_type" v-on:change="generate_mock_data(mock_type)" name="select-mock-type" class="form-control selectpicker" >
                {% for item in mock_data_type %}
                  <option value={{item}}>{{item}}</option>
                {% endfor %}
              </select>
            </div>
          </div>
          <br>
          <a class="btn btn-outline-secondary" v-on:click="generate_mock_data(mock_type)">Generate Another One!</a>
          <br>
          <br>
          
          <div class="input-group mb-3">
            <input v-model="mock_data" type="text" class="form-control" placeholder="Mock-Data" aria-label="Mock-Data" aria-describedby="basic-addon1">
          </div>

        </div>
   </div>
  </div><!-- /.row -->
  <br>
  <div class = "row">
    <div class="col-lg-8">
      <a class="no_type_a" target="_blank" data-tooltip="点击查看 API 文档" href="https://github.com/SUIBE-Blockchain/FISCO_BCOS_Toolbox/wiki/%E6%8E%A5%E5%8F%A3-v1.0#2-translate-signature"><h3><i class="fa fa-share"></i> 数据转换器</h3></a>
      <br>
      <div class="form-group">
        <label class="control-label">转换什么：</label>
        <br>
          <div class="selectContainer">
            <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
              <select  v-model="trans_type" v-on:change="translate_data(trans_type)" name="select-trans-type" class="form-control selectpicker" >
                {% for item in trans_type%}
                  <option value={{item}}>{{item}}</option>
                {% endfor %}
              </select>
            </div>
          </div>
          <br>
          <div class="input-group mb-3">
            <input v-model="trans_data" type="text" class="form-control" placeholder="Trans-Data" aria-label="Trans-Data" aria-describedby="basic-addon1">
          </div>
          <br>
          <a class="btn btn-outline-secondary" v-on:click="translate_data(trans_type,trans_data)">Translate!</a>
          <br>
          <br>

          <div v-if="trans_type=='signature'">
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <span class="input-group-text" id="basic-addon1">r :</span>
              </div>
              <input v-model="r" type="text" class="form-control" placeholder="r" aria-label="r" aria-describedby="basic-addon1">
            </div>
            
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <span class="input-group-text" id="basic-addon1">s:</span>
              </div>
            <input v-model="s" type="text" class="form-control" placeholder="s" aria-label="s" aria-describedby="basic-addon1">
            </div>

            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <span class="input-group-text" id="basic-addon1">v:</span>
              </div>
            <input v-model="v" type="text" class="form-control" placeholder="v" aria-label="v" aria-describedby="basic-addon1">
            </div>

            <a class="btn btn-info" target="_blank" href="https://mp.weixin.qq.com/mp/homepage?__biz=MzI0NTM0MzE5Mw==&hid=8&sn=82ca9c82b72fca9eaec924787a63e593"><i class="fa fa-book" aria-hidden="true"></i> 什么是r, s, v？</a>
          </div>

        </div>
   </div>
  </div><!-- /.row -->


  <br>
  <!-- up sdk config -->

<!-- down sdk config -->
  <div class="row">
    <div class="col-lg-8">
      <h3><i class="fa fa-edit"></i> 合约案例库</h3>
      <p>The Examples of Solidity on FISCO BCOS.</p>
      <p><a href="https://github.com/SUIBE-Blockchain/fisco_bcos_toolbox" class="btn btn-outline-secondary">开发中…… &raquo;</a></p>
    </div>
  </div>
</div>

</div>
<script>




  function btn_clear() {
   localStorage.clear();
   location.reload();
  }

  var context=new Vue({
    el: "#context",
    data: 
    {
      priv: "",
      addr: "",
      mock_type: "byte32",
      mock_data: "0x7465737400000000000000000000000000000000000000000000000000000000",
      trans_type: "signature",
      trans_data: "",
      translated_data: new Object(),
      r: "",
      s: "",
      v: "",
    },
    methods:
    {
    get_addr:function()
      {
        axios(
              {
                  method:'get',
                  url:'http://127.0.0.1:5000/api/v1/generate_addr',
                  headers: {
                      'Content-Type': 'application/x-www-form-urlencoded',
                  }                                
              })
              .then(function(response){

                context.priv = response.data.payload.priv;
                context.addr = response.data.payload.addr;
                localStorage.setItem( context.priv,context.addr);


                var body="";
                for(var i=0; i<localStorage.length;i++){
                   body=body+"<p class=\"panel-body\" >"+"Privkey: "+localStorage.key(i)+"</p>"+"<p class=\"panel-body\" >"+"Address: "+localStorage.getItem(localStorage.key(i))+"</p>";

                }
                document.getElementById("keybody").innerHTML=body;
              })
              .catch(function(error){
              })
      },
    get_addr_by_priv:function(priv)
    {
        axios({
            method:'post',
            url:'api/v1/generate_addr',
            data:
            {
                priv: priv,
            },
            headers:
            {
                'Content-Type': 'application/x-www-form-urlencoded',
            }                             
        })
        .then(function(response){
          context.translated_data = response.data.payload.priv
          context.addr = response.data.payload.addr
          localStorage.setItem( context.translated_data,context.addr);


          var body="";
          for(var i=0; i<localStorage.length;i++){
            body=body+"<p class=\"panel-body\" >"+"Privkey: "+localStorage.key(i)+"</p>"+"<p class=\"panel-body\" >"+"Address: "+localStorage.getItem(localStorage.key(i))+"</p>";

          }
          document.getElementById("keybody").innerHTML=body;
        })
        .catch(function(error){
          console.log(error)
        })
    },
    
    get_sdk_config_w3:function(
      crypto_type,
      contract_info_file,
      account_keyfile_path,
      logdir,
      account_keyfile,
      account_password,
      gm_account_keyfile,
      gm_account_password,
      fiscoChainId,
      groupid,
      client_protocol,
      remote_rpcurl,
      channel_host,
      channel_port,
      channel_ca,
      channel_node_cert,
      channel_node_key,
      solc_path,
      gm_solc_path,
      solcjs_path,
    )
    {
        const link = document.createElement('a')
        axios({
            method:'post',
            url:'api/v1/get_sdk_config',
            data:
            {
              'crypto_type':crypto_type,
              'contract_info_file':contract_info_file,
              account_keyfile_path:account_keyfile_path,
              logdir:logdir,
              account_keyfile:account_keyfile,
              account_password:account_password,
              gm_account_keyfile:gm_account_keyfile,
              gm_account_password:gm_account_password,
              fiscoChainId:fiscoChainId,
              groupid:groupid,
              client_protocol:client_protocol,
              remote_rpcurl:remote_rpcurl,
              channel_host:channel_host,
              channel_port:channel_port,
              channel_ca:channel_ca,
              channel_node_cert:channel_node_cert,
              channel_node_key:channel_node_key,
              solc_path:solc_path,
              gm_solc_path:gm_solc_path,
              solcjs_path:solcjs_path,
            },
            headers:
            {
                'Content-Type': 'application/x-www-form-urlencoded',
            }                             
        })
        .then(function(response){
          console.log('[+]oh is ok!')
          let blob = new Blob([response.data], {type: "application/x-www-form-urlencoded"});  // res就是接口返回的文件流了
          let objectUrl = URL.createObjectURL(blob); 
          link.href=objectUrl
          link.download='client_config.py'
          link.click()
          // window.location.href = objectUrl; 
        })
        .catch(function(error){
          console.log(error)
        })
    },
    translate_sig:function(sig){
      axios({
            method:'post',
            url:'api/v1/translate_sig',
            data:
            {
                sig: sig,
            },
            headers:
            {
                'Content-Type': 'application/x-www-form-urlencoded',
            }                             
        })
        .then(function(response){
          result = response.data.payload
          context.r = result["r"]
          context.s = result["s"]
          context.v = result["v"]
        })
        .catch(function(error){
          console.log(error)
        })      
    },  
    generate_mock_data:function(mock_type){
      if(mock_type=="byte32"){
        context.mock_data="0x7465737400000000000000000000000000000000000000000000000000000000"
      }
      else if(mock_type=="int"){
        context.mock_data=3
      }
      else if(mock_type=="bytes"){
        context.mock_data="0x233"
      }
    },
    translate_data: function(trans_type, trans_data){
      if(trans_type=="signature"){
        context.translate_sig(trans_data)
      }
    },
    get_sdk_config: function(){
        context.get_sdk_config_w3(
          window.crypto_type.value,
          window.contract_info_file.value,
          window.account_keyfile_path.value,
          window.logdir.value,
          window.account_keyfile.value,
          window.account_password.value,
          window.gm_account_keyfile.value,
          window.gm_account_password.value,
          window.fiscoChainId.value,
          window.groupid.value,
          window.client_protocol.value,
          window.remote_rpcurl.value,
          window.channel_host.value,
          window.channel_port.value,
          window.channel_ca.value,
          window.channel_node_cert.value,
          window.channel_node_key.value,
          window.solc_path.value,
          window.gm_solc_path.value,
          window.solcjs_path.value,
        )
    },
    }

  })
</script>
{% endblock %}

